<!--
 * @Author: arvin(王德江)
 * @Date: 2022-06-08 16:19:14
 * @LastEditors: arvin(王德江)
 * @LastEditTime: 2022-06-09 17:47:51
 * @Description: 
-->
<template>
<div class="container">
    el-tree
    <el-tree :data="data" :props="defaultProps" show-checkbox @node-click="handleNodeClick"></el-tree>
    my-tree
    <input v-model="inputData">
    <nuxt-tree ref="tree" :tree-data="mytreeData" show-checkbox :limit-data="inputData" @item-click="handleItemClick"></nuxt-tree>
    <!-- <my-tree :data="mytreeData" @myClick="myClick"></my-tree> -->
    <el-button  @click="getId">获取已选择id</el-button> {{checks}}

    <div>
      - 基础功能<br/>
      - 懒加载<br/>
      - 默认展开和选中<br/>
      - 禁用状态<br/>
      - 节点获取（样例中获取check节点）<br/>
      - 节点过滤
    </div>
</div>
</template>

<script>
import NuxtTreeVue from '../components/NuxtTree.vue';

// import Mytree from '../components/Mytree.vue';
export default {
  name: 'IndexPage',
  components: {
    // 'my-tree': Mytree
    'nuxt-tree': NuxtTreeVue
},
  data() {
      return {
        inputData: '',
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        mytreeData: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          expand: true,
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            disable: true,
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        checks: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleItemClick(data) {
      console.log(data)
    },
    getId() {
      this.checks = this.$refs.tree.getCheckId()
    }
  }
}
</script>
